<template>
  <div class="containerbox">
    <div class="container">
      <el-descriptions title="收货人信息">
        <el-descriptions-item label="收货人姓名" v-if="form.take == 2">{{ form.name }}</el-descriptions-item>
        <el-descriptions-item label="收货人电话" v-if="form.take == 2">{{ form.mobile }}</el-descriptions-item>
        <el-descriptions-item label="收货人地址" v-if="form.take == 2">{{ form.address }}</el-descriptions-item>
        <el-descriptions-item label="订单编号">{{ id }}</el-descriptions-item>
        <!-- <el-descriptions-item label="订单备注">{{ form.remarks }}</el-descriptions-item> -->
        <el-descriptions-item label="支付方式">{{ ['茶花', '微信', '支付宝', '银行卡'][form.pay_type] }}</el-descriptions-item>
        <el-descriptions-item label="取餐码" v-if="form.take !== 2">{{ form.takeinfo
          }}</el-descriptions-item>
        <el-descriptions-item label="支付时间">{{ parseDateTime(form.CreatedAt)
          }}</el-descriptions-item>
        <el-descriptions-item label="取餐方式">{{ ['堂食', '打包外带', '外送'][form.take]
          }}</el-descriptions-item>
        <el-descriptions-item label="订单状态"> {{
          ["更新取餐码", "", "", "出餐完成", "配送中", "已完成", "出餐失败退款", "", "", "部分退款"][
          form.status
          ]
        }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions :title="'商品详情'" direction="vertical" :column="2">
        <el-descriptions-item :label="itme.title" v-for="(itme, index) in shopping_list" :key='index'>
          <div class="flex">
            <el-image style="width: 100px; height: 100px" :src="itme.litimgUrl" :preview-src-list="[itme.litimgUrl]">
            </el-image>
            <div class="mar">
              <div>价格：{{ itme.price }}</div>
              <div>成本价：{{ itme.amount }}</div>
              <div>卖价：{{ maijia(itme) }}</div>
              <div>ZKFC：{{ (parseFloat(itme.price) - maijia(itme)).toFixed(2) }}</div>
              <div>数量：{{ itme.quantity }}</div>
            </div>

            <div class="goodslist">
              <div class="goodsdetail">
                <div> {{ itme.skuName }} </div>

              </div>
            </div>
          </div>

        </el-descriptions-item>

      </el-descriptions>
      <el-descriptions title="商家详情">
        <el-descriptions-item label="商家名字">{{ form.store_name }}</el-descriptions-item>
        <el-descriptions-item label="商家地址">{{ form.store_address }}</el-descriptions-item>

      </el-descriptions>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      form: {},
      order_logistics: '',
      order_waybill: '',
      shopping_list: [],
      id: 0,
      data: {},
      list: ["顺丰", '邮政', '中通', '圆通', '申通', '京东', '百世快递', '韵达', '德邦', '天天', '极兔', '其他'],
      fahuo: 0,
      state: 0,
      orderid: ''
    };
  },
  created() {
    this.id = this.$route.query.id

    this.getdata(this.id)
  },

  methods: {

    maijia(row) {
      let price = parseFloat(row.price)
      let amount = parseFloat(row.amount)
      let str = 0
      if (amount * 1.1 > price) {
        str = (price - amount) / 100 * 20 + amount
      } else {
        str = amount * 1.1
      }
      return str.toFixed(2)
    },

    geteval(img) {
      try {
        return eval('(' + img + ')')
      } catch (error) {
        return []
      }

    },
    getdata(id) {
      this.request('api/openapi/cotticoffee/getOrder/', 'post', { out_order_no: id }).then(res => {
        console.log(res, "Res")
        this.form = res.data
        this.form['address'] = res.data.province + res.data.city + res.data.area + res.data.detailed
        this.orderid = res.data.order_id
        //处理详情
        let goods = JSON.parse(res.data.goods)
        let goods_detail = JSON.parse(res.data.goods_detail)

        let arr = []

        goods.forEach((itemss) => {
          let obj = {}
          goods_detail.forEach((items) => {

            if (itemss.itemNo == items.itemNo) {
              let obj = {
                oldprice: items.firstSku.sellPrice,
                price: items.firstSku.sellPrice,
                oldamount: items.firstSku.amount,
                amount: items.firstSku.amount,
                goods: [],
                checkbox: [], //查看选了 那些
                skuNo: items.firstSku.skuNo,
                skuName: items.firstSku.skuName,
                litimgUrl: items.litimgUrl,
                title: items.title,
                quantity: itemss.num, //默认一杯
                skuCombinList: [],
                itemNo: items.itemNo,
              }
              let specItems = items.specItems //需要赛选的
              let skusSpecs = items.firstSku.skusSpecs //需要赛选的
              let skuCombinList = items.skuCombinList //需要赛选的
              specItems.forEach((item, i) => {
                let listobj = {}
                listobj.title = item.specItemName
                listobj.list = []
                listobj.id = skusSpecs[i].specItemValue
                obj.checkbox.push(skusSpecs[i].specItemValue)
                item.specValueList.forEach((it) => {
                  let valueobj = {}
                  valueobj.text = it.name
                  valueobj.value = it.value
                  listobj.list.push(valueobj)
                })
                obj.goods.push(listobj)
              })
              skuCombinList.forEach((item) => {
                item.checkbox = []
                item.skusSpecs.forEach((it) => {
                  item.checkbox.push(it.specItemValue)
                })
              })
              obj.skuCombinList = skuCombinList
              arr.push(obj)

            }
          })
        })
        this.shopping_list = arr
        console.log(this.shopping_list, "this.shopping_list")

      })
    },
    submit() {
      let that = this
      this.request('admin/order/', 'post', { 'order': this.id, 'logistics': this.order_logistics, 'waybill': this.order_waybill }).then(res => {
        if (res.errno == 0) {
          this.$message.success('发货成功');
          setTimeout(function () {
            that.$router.push('/order/order')
          }, 500);
        } else {
          this.$message.error(res.errmsg)
        }
      })
    },
    submits() {
      let taht = this
      this.request('admin/order/', 'DELETE', { 'order': this.orderid }).then(res => {
        if (res.errno == 0) {
          this.$message.success(res.errmsg);
          setTimeout(function () {
            taht.$router.push('/order/order')
          }, 500);
        } else {
          this.$message.error(res.errmsg)
        }
      })
    },
    //时间
    parseDateTime(dateTimeStr) {
      // 创建一个新的 Date 对象
      const date = new Date(dateTimeStr);

      // 获取年份、月份、日期、小时、分钟和秒
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');

      // 返回格式化后的字符串
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
  },

}
</script>

<style scoped="scoped" lang="scss">
.containerbox {
  padding: 20px;
}

.goodslist {
  margin-left: 20px;

  .goodsdetail {
    display: flex;
  }

}






.submt {

  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.flex {
  display: flex;

  .mar {
    margin-left: 10px;
  }
}

.el-descriptions {
  margin-top: 20px;
}
</style>
